<template>
  <div class="container">
    <div class="page-top "></div>
    <view class="gybody">
      <view class="lyfk user-update">
        <ul class="hzly">
          <li>
            <span class="bs">*姓名</span>
            <van-field placeholder="请输入姓名" maxlength="18"></van-field>
          </li>
          <li>
            <span class="bs">*手机号码</span>
            <van-field placeholder="请输入手机号码" maxlength="18"></van-field>
          </li>
          <li>
            <span class="bs">*省市区</span>
            <van-field placeholder="请选择" is-link disabled @click="showArea=true" :value="area"></van-field>
          </li>
          <li>
            <span class="bs">*详细地址</span>
            <van-field placeholder="请输入详细地址" maxlength="18"></van-field>
          </li>
        </ul>
        <view class="lyfk-tj">
          <vat-button>立即添加</vat-button>
        </view>
      </view>

      <!--省市区选择框-->
      <van-overlay lock-scroll :show="showArea" @click="showArea=false">
        <view style="position: fixed;bottom: 0;right: 0;left: 0;">
          <van-area :area-list="areaList" @confirm="confirmArea" @cancel="cancelArea"/>
        </view>
      </van-overlay>

      <!--场景选择框-->
<!--      <van-overlay :show="showScene" @click="showScene=false">-->
<!--        <view style="position: fixed;bottom: 0;right: 0;left: 0;">-->
<!--          <van-picker :columns="columns" title="请选择场景" show-toolbar @confirm="confirmScene" @cancel="cancelScene"/>-->
<!--        </view>-->
<!--      </van-overlay>-->

    </view>

  </div>
</template>

<script>
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'

import {getArea, getChildArea} from "../../../../requests/user/area";
import {areaList} from "../../../../store/areaData";

let $this
export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    // patientIn: {
    //   type: Object,
    //   default () {
    //     return {}
    //   }
    // }
  },
  data() {
    // 这里存放数据
    return {
      areaList,
      columns: ['家', '学校', '机场', '公司'],
      showArea: false,
      area: '',
      showScene: false,
      scene: '',
      fileList: [],
      isActive: 1
    }
  },
  // 方法集合
  methods: {
    // action(e) {
    //   if (e.mp._relatedInfo.anchorTargetText === '男士') {
    //     $this.isActive = 1
    //   } else {
    //     $this.isActive = 2
    //   }
    // },
    confirmArea(e) {
      let $data = e.mp.detail.values
      let val = ''
      for (let i = 0; i < $data.length; i++) {
        if ($data.length - i == 1) {
          val += $data[i]['name']
        } else {
          val += $data[i]['name'] + '—'
        }
      }
      $this.area = val
    },
    cancelArea() {
      $this.area = ''
    },
    confirmScene(e) {
      $this.scene = e.mp.detail.value
    },
    cancelScene() {
      $this.scene = ''
    }

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    $this = this
  },
  onShow() {
    // getArea().then(res => {
    //   let resp = res.data
    //   if (resp.code === 0) {
    //     let $data = resp.data
    //     for (let i = 0; i < $data.length; i++) {
    //       // 遍历第一级地址
    //       let key = $data[i]['id']
    //       let value = $data[i]['name']
    //       $this.areaList.province_list[key] = value
    //     }
    //     getChildArea().then(res => {})
    //     //
    //     //   for (let j = 0; j < $data[i]['children'].length; j++) {}
    //     //
    //     //   //第二级
    //     //   let key2 = $data[i]['children'][i]['id']
    //     //   let value2 = $data[i]['children'][i]['name']
    //     //   $this.areaList.city_list[key2] = value2
    //     //
    //     //   //第三级
    //     //   let key3 = $data[i]['children'][i]['children'][i]['id']
    //     //   let value3 = $data[i]['children'][i]['children']['name']
    //     //   $this.areaList.county_list[key3] = value3
    //     //
    //
    //     console.log($data)
    //
    //   }
    // })
  }
}
</script>

<style>
.action {
  background-color: #6c77ad;
  color: white;
}

@import "index.css";
</style>
